<template>
	<view class="content">
		<view class="goodsCommentBox" v-if="orderType==1">
			<view class="rateBox">
				<text class="label">商品评价</text>
				<uni-rate :value="goods.goods_comment" size="20" data-num='1' color="#b2b2b2" @change="change($event,1)"
					class="rate" />
			</view>
			<view class="line"></view>
			<text class="other">其他评价</text>
			<view class="rateBox martop20">
				<text class="label">描述相符</text>
				<uni-rate :value="goods.description_comment" size="20" data-num='1' color="#b2b2b2"
					@change="change($event,2)" class="rate" />
			</view>
			<view class="rateBox martop20">
				<text class="label">服务态度</text>
				<uni-rate :value="goods.service_comment" size="20" data-num='1' color="#b2b2b2"
					@change="change($event,3)" class="rate" />
			</view>
			<view class="rateBox martop20">
				<text class="label">配送服务</text>
				<uni-rate :value="goods.express_comment" size="20" data-num='1' color="#b2b2b2"
					@change="change($event,4)" class="rate" />
			</view>
			<textarea placeholder="请输入评价内容" v-model="comment"></textarea>
			<view class="selBox">
				<view class="imgBox" v-for="(item,index) in imgArr" :key="index">
					<image :src="item" class="selImg"></image>
					<view class="del" @click="del(index)">
						X
					</view>
				</view>
				<view class="selectBox" @click="uploadFile()">
					<text class="selectLabel">+</text>
					<text class="selectLabel">选择图片</text>
				</view>
			</view>
		</view>
		<view class="courseCommentBox" v-else>
			<view class="rateBox">
				<text class="label">课程评价</text>
				<uni-rate :value="course.rate" size="20" data-num='1' color="#b2b2b2" @change="change($event,5)"
					class="rate" />
			</view>
			<textarea placeholder="请输入评价内容" v-model="course.comment"></textarea>
			<view class="selBox">
				<view class="imgBox" v-for="(item,index) in course.imgArr" :key="index">
					<image :src="item" class="selImg"></image>
					<view class="del" @click="del(index)">
						X
					</view>
				</view>
				<!-- <view class="selectBox" @click="uploadFile()">
					<text class="selectLabel">+</text>
					<text class="selectLabel">选择图片</text>
				</view> -->
			</view>
		</view>
		<view class="submit" @click="submit()">
			提交
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	import {
		chooseImage,
		uploadFile,
		trottle
	} from '@/utils/tools.js'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/course/`,
				goods: {
					goods_id: '', //商品id
					item_id: '', //规格Id
					goods_comment: 0,
					service_comment: 0,
					description_comment: 0,
					express_comment: 0,
				},
				course: {
					rate: 0,
					comment: ''
				},
				imgArr: [],
				id: '', //商品订单id  order_goods_id
				orderType: '',
				user_id: ''
			}
		},
		onShow() {
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.id = currentPage.options.id;
			console.log("走到这里了");
			console.log(currentPage.options.type)
			this.orderType = currentPage.options.type;
			if (this.orderType == 1) {
				this.goods.goods_id = currentPage.options.goods_id;
				this.goods.item_id = currentPage.options.item_id;
			}
			if (uni.getStorageSync('store_userId')) {
				this.user_id = JSON.parse(uni.getStorageSync('store_userId')).value;
			}
		},
		methods: {
			submit() {
				console.log(this.orderType);
				if (this.orderType == 1) { //提交商品评价
					if (this.goods.goods_comment == 0) {
						this.$toast({
							title: '请对商品评分'
						})
						return
					}
					this.$request.post(`shopapi/GoodsComment/add`, {
						goods_id: this.goods.goods_id,
						item_id: this.goods.item_id,
						spec_value_str: '默认',
						user_id: this.user_id,
						order_goods_id: this.id,
						goods_comment: this.goods.goods_comment,
						service_comment: this.goods.service_comment,
						description_comment: this.goods.description_comment,
						express_comment: this.goods.express_comment,
						comment: this.comment,
						image: this.imgArr
					}).then(res => {
						this.$toast({
							title: res.data.msg
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
							})
						}, 2000)
					})
				} else { //课程评价
					if (this.course.rate == 0) {
						this.$toast({
							title: '请对课程评分'
						})
						return
					}
					console.log(this.course.comment);
					this.$request.post(`course/CourseComment/comment`, {
						id: this.id,
						score: this.course.rate,
						comment: this.course.comment,
					}).then(res => {
						this.$toast({
							title: res.data.msg
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
							})
						}, 2000)
					})
				}
			},
			del(index) {
				this.imgArr.splice(index, 1);
			},
			change(event, num) {
				if (num == 1) {
					this.goods.goods_comment = event.value
				}
				if (num == 2) {
					this.goods.description_comment = event.value
				}
				if (num == 3) {
					this.goods.service_comment = event.value
				}
				if (num == 4) {
					this.goods.express_comment = event.value
				}
				if (num == 5) {
					this.course.rate = event.value
				}
			},
			async uploadFile() {
				const [error, success] = await uni.chooseImage({
					count: 1
				})
				if (error) {
					return
				}
				uni.showLoading({
					title: '上传中...'
				})
				try {
					const file = await uploadFile(success.tempFilePaths[0]);
					this.imgArr.push(file.uri)
					uni.hideLoading()
				} catch (e) {
					this.$toast({
						title: '上传失败，请稍后再试'
					})
					uni.hideLoading()
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.martop20 {
		margin-top: 20rpx;
	}

	.other {
		display: block;
		margin-left: 30rpx;
		font-size: 26rpx;
		font-family: 'am';
		color: #b2b2b2;
		margin-top: 50rpx;
	}

	.line {
		width: 90%;
		height: 1rpx;
		background-color: #b2b2b2;
		margin-top: 50rpx;
		margin-left: 5%;
	}

	.goodsCommentBox {
		width: 700rpx;
		margin-left: 25rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-radius: 15rpx;
		background-color: #fff;
		margin-top: 50rpx;
	}

	.submit {
		width: 387rpx;
		height: 84rpx;
		border-radius: 42rpx;
		background-color: #f08329;
		color: #ffffff;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		margin: 0 auto;
		margin-top: 95rpx;
		margin-bottom: 30rpx;
	}

	.selBox {
		width: 650rpx;
		margin-top: 30rpx;
		margin-left: 25rpx;
		display: flex;
		flex-wrap: wrap;

		.imgBox {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
			margin-left: 40rpx;
			margin-bottom: 20rpx;
		}

		.del {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 30rpx;
			height: 30rpx;
			background-color: red;
			font-size: 20rpx;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
		}

		.selImg {
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
		}
	}

	.selectBox {
		width: 160rpx;
		height: 160rpx;
		border-radius: 15rpx;
		background-color: #f6f6f6;
		margin-left: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;

		.selectLabel {
			font-size: 26rpx;
			font-weight: 'am';
			margin-top: 10rpx;
		}
	}

	textarea {
		width: 610rpx;
		height: 180rpx;
		margin-top: 30rpx;
		margin-left: 25rpx;
		border-radius: 15rpx;
		background-color: #f6f6f6;
		padding: 20rpx;
	}

	.rateBox {
		width: 100%;
		display: flex;

		.label {
			margin-left: 30rpx;
			font-size: 26rpx;
			font-family: 'am';
		}

		.rate {
			margin-left: 30rpx;
		}
	}

	.courseCommentBox {
		width: 700rpx;
		margin-left: 25rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-radius: 15rpx;
		background-color: #fff;
		margin-top: 50rpx;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #f3f4f5;
	}

	page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #f3f4f5 !important;
		padding-bottom: 0 !important;
	}
</style>